<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1158 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M875.209566 1024a282.947368 282.947368 0 1 1 282.947369-282.947368 283.270737 283.270737 0 0 1-282.947369 282.947368z m-0.161684-490.981053a208.033684 208.033684 0 1 0 208.168421 208.033685 208.276211 208.276211 0 0 0-208.168421-208.033685zM875.209566 916.210526a40.421053 40.421053 0 1 1 40.421053-40.421052 40.421053 40.421053 0 0 1-40.421053 40.421052z m13.473685-134.736842h-26.947369a26.947368 26.947368 0 0 1-26.947368-26.947368v-134.736842a26.947368 26.947368 0 0 1 26.947368-26.947369h26.947369a26.947368 26.947368 0 0 1 26.947368 26.947369v134.736842a26.947368 26.947368 0 0 1-26.947368 26.947368z m161.199157-547.301052v46.618947a105.364211 105.364211 0 0 1-3.422315 37.187368 37.726316 37.726316 0 0 1-33.738106 21.827369 31.824842 31.824842 0 0 1-17.030736-2.15579c-31.824842-13.204211-26.677895-44.463158-26.650948-87.578947V167.882105a146.863158 146.863158 0 0 0-7.383579-70.332631c-11.910737-16.707368-31.797895-15.36-60.146526-15.36H145.232303c-24.522105 0-44.085895-0.269474-54.757052 13.20421a88.926316 88.926316 0 0 0-9.081264 56.050527v696.32c0 28.564211-1.643789 48.505263 15.333053 60.631578 15.979789 11.317895 55.161263 7.275789 82.243368 7.27579h267.37179c34.789053 0 52.035368 4.042105 57.317053 33.68421a45.810526 45.810526 0 0 1-3.422316 24.791579c-12.099368 28.294737-45.810526 22.366316-84.803369 22.366316H114.862619c-3.476211-0.269474-6.979368-0.808421-10.482526-1.077895a136.919579 136.919579 0 0 1-22.12379-5.658947 126.652632 126.652632 0 0 1-71.194947-65.751579 153.6 153.6 0 0 1-10.213053-37.187368c0-18.324211-0.188632-36.648421-0.296421-54.703158V160.067368A270.982737 270.982737 0 0 1 5.375461 88.656842 123.957895 123.957895 0 0 1 95.298829 4.311579 259.287579 259.287579 0 0 1 152.588935 1.347368h734.746947a308.385684 308.385684 0 0 1 63.811369 2.15579 135.922526 135.922526 0 0 1 56.589473 28.294737 122.206316 122.206316 0 0 1 39.989895 67.098947 357.456842 357.456842 0 0 1 2.290526 74.374737v60.901053z m-743.558736 86.770526h-31.878737a37.726316 37.726316 0 0 1-32.336842-33.953684 38.507789 38.507789 0 0 1 26.354526-41.498948 124.928 124.928 0 0 1 30.477474-1.077894h400.303158a90.516211 90.516211 0 0 1 34.330947 3.233684 37.861053 37.861053 0 0 1 18.863158 21.018947l2.209684 9.162105a37.726316 37.726316 0 0 1-29.130105 42.307369 127.380211 127.380211 0 0 1-28.833684 0.808421H306.323672z m-64.377264 211.267368a36.837053 36.837053 0 0 1 4.122948-22.096842c13.473684-27.486316 45.999158-20.749474 84.021895-20.749473h173.244631a188.928 188.928 0 0 1 72.757895 5.12 38.912 38.912 0 0 1 16.761263 21.557894c0.538947 2.964211 1.104842 5.928421 1.643789 9.162106a37.726316 37.726316 0 0 1-30.208 40.421052c-16.464842 0-32.956632 0.269474-49.421473 0.269474h-189.763369c-43.250526 0-76.557474 6.197895-83.159579-33.684211z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
